import React from 'react';
import { Link , Route, useParams , Redirect } from 'react-router-dom';

const DocContent = () => {
    const params = useParams();

    

    return <div>
        <h1>{params.name}</h1>
    </div>
}

const Doc = () => {
    const list = ["体验React","学习React","获取最新消息"];

    return (
        <div className='Doc'>
            <div className='Doc-left'>
                <Route path="/doc/:name">
                    <DocContent list={list}/>
                </Route>
                <Redirect to="./doc/start" />
            </div>
            <div className='Doc-right'>
                <ol>
                    <li><Link to="/doc/start">开始</Link></li>
                    <li><Link to="/doc/core">核心概念</Link></li>
                    <li><Link to="/doc/highLevel">高级指引</Link></li>
                </ol>
            </div>
        </div>
    )
}

export default Doc